<template>
    <div class="trigger-overtime">
        <div class="trigger-overtime-tip">在实际业务中“截止时间需要晚于起算时间”，如果实际业务数据不满足该条件，则触发条件无效</div>
        <div class="trigger-overtime-title">判断规则</div>
        <div class="trigger-overtime-content" v-loading="loading">
            <div class="trigger-overtime-content-item">
                <div class="trigger-overtime-content-item-title">当截止时间</div>
                <div class="trigger-overtime-content-item-content">
                    <el-select v-model="state.executeWay.options.rule.endTimeConfig.tsType" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="option in endTimeData.tsTypeList" :label="option.label" :value="option.value" :key="option.value"></el-option>
                    </el-select>
                    <el-select v-model="state.executeWay.options.rule.endTimeConfig.value" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="option in endTimeData.valueList" :label="option.cnName" :value="option.enName" :key="option.enName"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="trigger-overtime-content-item">
                <div class="trigger-overtime-content-item-title">减去起算时间</div>
                <div class="trigger-overtime-content-item-content">
                    <el-select v-model="state.executeWay.options.rule.startTimeConfig.tsType" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="option in startTimeData.tsTypeList" :label="option.label" :value="option.value" :key="option.value"></el-option>
                    </el-select>
                    <el-select v-model="state.executeWay.options.rule.startTimeConfig.value" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="option in startTimeData.valueList" :label="option.cnName" :value="option.enName" :key="option.enName"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="trigger-overtime-content-item">
                <div class="trigger-overtime-content-item-title">超过</div>
                <div class="trigger-overtime-content-item-content">
                    <el-select v-model="state.executeWay.options.rule.durationConfig.tsType" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="option in durationData.tsTypeList" :label="option.label" :value="option.value" :key="option.value"></el-option>
                    </el-select>
                    <el-input v-model.number="state.executeWay.options.rule.durationConfig.value" @input="handleDurationValueInput" placeholder="请输入"></el-input>
                    <el-select v-model="state.executeWay.options.rule.durationConfig.unit" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="option in durationData.unitList" :label="option.label" :value="option.value" :key="option.value"></el-option>
                    </el-select>
                </div>
                <div class="trigger-overtime-content-item-footer">时触发</div>
            </div>
        </div>
    </div>
</template>

<script>
import state from '@src/modules/trigger/view/setting/util/state.js'
import { getTimeOutFormTimeField } from '@src/modules/trigger/api/trigger.js'

export default {
    name: 'OverTimeTrigger',
    props: {
        options: {
            type: Object,
            default: () => {}
        }
    },
    created() {
        if (!state.executeWay?.options?.rule) {
            this.$set(state.executeWay, 'options', {
                timeOutType: 'duration', // 超时类型
                rule: {
                    endTimeConfig: {
                        tsType: '',
                        value: '',
                    },
                    startTimeConfig: {
                        tsType: '',
                        value: '',
                    },
                    durationConfig: {
                        tsType: '',
                        value: '',
                        unit: '',
                    }
                }
            });
        }
        this.loading = true;
        getTimeOutFormTimeField({
            fromApiId: state.currentNodeInfoFront.options?.apiId,
        }).then(res => {
            if (res.status === 0) {
                this.endTimeData.valueList = res?.data;
                this.startTimeData.valueList = res?.data;
            } else {
                this.$message.error(res?.message);
            }
        }).catch(err => {
            console.log(err);
        }).finally(() => {
            this.loading = false;
        })
    },
    computed: {
        state() {
            return state;
        },
    },
    data() {
        return {
            endTimeData: {
                tsTypeList: [
                    { label: '表单中的时间', value: 'formTime' }
                ],
                valueList: [],
            },
            startTimeData: {
                tsTypeList: [
                    { label: '表单中的时间', value: 'formTime' }
                ],
                valueList: [],
            },
            durationData: {
                tsTypeList: [
                    { label: '固定时长', value: 'fixedTime' }
                ],
                unitList: [
                    { label: '分', value: 'm' },
                    { label: '小时', value: 'h' },
                    { label: '天', value: 'd' }
                ]
            },
            loading: false,
        };
    },
    methods: {
        handleDurationValueInput(val) {
            state.executeWay.options.rule.durationConfig.value = val.replace(/[^\d]/g, '');
        },
    },
}
</script>

<style lang="scss" scoped>
.trigger-overtime {
    .trigger-overtime-tip {
        background-color: #FCF6EC;
        color: #E6A23C;
        font-size: 14px;
        padding: 8px 16px;
        margin-bottom: 10px;
    }
    .trigger-overtime-title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .trigger-overtime-content {
        .trigger-overtime-content-item {
            margin-bottom: 10px;
            .trigger-overtime-content-item-title {
                width: 100px;
                line-height: 32px;
            }
            .trigger-overtime-content-item-content {
                flex: 1;
                display: flex;
                .el-select {
                    margin-right: 10px;
                }
                .el-input {
                    margin-right: 10px;
                }
            }
            .trigger-overtime-content-item-footer {
                line-height: 32px;
            }
        }
    }
}
</style>
